<style scoped>
::v-deep .el-table th {
  background-color: lightpink;
  height: 100px;
  color: red;
  font-size: 20px;
}

::v-deep .el-table tr {
  background-color: lightblue;
}

::v-deep .el-table td, .building-top .el-table th.is-leaf {
  border-bottom: 2px solid #007ACC;
}

::v-deep .el-table td, .el-table th {
  text-align: center;
}

::v-deep .el-table td {
  padding: 0px 0px;
}

</style>


<template>
  <div>

    <p class="customText">后台用户管理</p>

    <el-table :data="dataList" style="width: 100%" border stripe>
      <el-table-column prop="uid" label="ID" width="80"></el-table-column>
      <el-table-column prop="userAccount" label="用户名" width="350"></el-table-column>
      <el-table-column prop="userName" label="昵称" width="350"></el-table-column>
      <el-table-column prop="userRole" label="用户角色" width="200"></el-table-column>

      <el-table-column label="修改角色" width="200">
        <template #default="scope">
          <el-select v-model="scope.row.value" class="m-2" placeholder="Select" size="large">
            <el-option
                v-for="item in options"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
          <el-button @click="changeRole(scope.row.uid,scope.row.value)" type="success">修改</el-button>
        </template>
      </el-table-column>


      <el-table-column label="删除用户" width="200">
        <template #default="scope">
          <el-button
              size="small"
              type="danger"
              @click="del(scope.row.uid)"
          >Delete
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
          v-model:current-page="pageNum"
          :page-sizes="[2, 5, 8, 15]"
          v-model:page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>

  </div>
</template>


<script setup>


import {reactive, ref} from "vue";
import {getWithToken} from "../net/postAndGetMethodWithToken";
import {ElMessage} from 'element-plus'

import axios from "axios";


const pageNum = ref(1)
const pageSize = ref(8)
const total = ref()

const dataList = ref([])

const value = ref('')
const options = [
  {
    value: '1',
    label: 'admin',
  },
  {
    value: '2',
    label: 'user',
  },
  {
    value: '3',
    label: 'ban',
  },
]


const fun = () => {
  getWithToken('/api/user/all?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value,
      (data, code, message) => {
        dataList.value = data.list
        total.value = data.total

      })
}

fun()


const handleSizeChange = () => {
  fun()
}

const handleCurrentChange = () => {
  fun()
}

const del = (id) => {
  getWithToken('/api/user/delete?uid=' + id,
      (data, code, message) => {
        ElMessage({
          message: 'Success, this is a success message.',
          type: 'success',
        })
        fun()
      })
}

const changeRole = (id, op) => {
  console.log(value)
  getWithToken('/api/user/role?uid=' + id + '&op=' + op,
      (data, code, message) => {
        ElMessage({
          message: 'Success, this is a success message.',
          type: 'success',
        })
        fun()
      })
}


</script>


<style>
.customText {
  font-size:30px;
  color: coral;
  font-family: 楷体;
}
</style>
